header {
    width: 1120px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;

    .search-box {
        width: 720px;
        height: 60px;
        margin: 10px auto;
        position: relative;

        .search-ico {
            height: 60px;
            width: 60px;
            position: absolute;
            left: 15px;
            font: 400 40px/60px 'icomoon';
            color: #858585;
        }

        input {
            height: 60px;
            width: 650px;
            border-radius: 20px 0 0 20px;
            padding-left: 60px;
            font: 400 25px/60px 'AlimamaFangYuanTi';
            color: #858585;
            border: 1px solid #999999;

            &:focus {
                outline: none;
                border: 2px solid #FF8200;
            }

            &::-webkit-search-cancel-button {
                /* Remove default */
                -webkit-appearance: none;
            }

        }

        .search-click {
            position: absolute;
            right: 0;
            top: 0;
            height: 60px;
            width: 80px;
            background-color: #FF8200;
            border-radius: 0px 20px 20px 0;
            padding-left: 12px;
            font: 400 25px/60px 'AlimamaFangYuanTi';
            color: #FFFFFF;
            cursor: pointer;
        }

    }

    .banner {
        position: relative;
        width: 720px;
        height: 330px;
        margin: 0 auto;
        overflow: hidden;

        .items {
            position: absolute;
            width: 100%;
            height: 100%;

            div {
                position: absolute;
                height: 100%;
                width: 100%;
                background-position: center!important;
                background-size: 100%!important;
                background-repeat: no-repeat!important;

            }

            
        }


        .back,
        .forward {
            position: absolute;
            height: 50px;
            width: 50px;
            top: 50%;
            transform: translateY(-50%);
            font: 400 40px/50px 'icomoon';
            color: #fff;
            opacity: .6;
            cursor: pointer;

        }

        .back {
            left: 50px;
        }

        .forward {
            right: 50px;
        }

        .items-nav {
            max-width: 80%;
            height: 40px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
           

            span {
                width: 15px;
                height:15px;
                border-radius: 7.5px;
                background-color: #fdfdfd;
                border: 1px solid #fdfdfd;
                opacity: .6;
                cursor: pointer;
                flex-shrink: 1;

            }

            .items-nav-focus {
                background-color: #fff;
                opacity: 1;
                transform: scale(1.2);
            }
        }
    }

    .logo {
        width: 195px;
        height: 200px;
        position: absolute;
        // top: 145px;
        top: 210px;
        left: 0;
        background: url(../images/logoleft.png) no-repeat;
        background-size: 195px;
        background-position: center;
        cursor: pointer;

    }

    aside {
        width: 195px;
        height: 200px;
        position: absolute;
        // top: 145px;
        top: 210px;
        right: 0;
        font: 400 20px/20px 'AlimamaFangYuanTi';
        background: linear-gradient(to top, #FFFEFC 20%, #FEE6CE 80%);
        color: #FF8C16;

        div:nth-child(1) {
            height: 50px;
            font-size: 30px;
            line-height: 70px;
            padding-left: 20px;
            transform: rotate(-8deg);
        }

        div:nth-child(2) {
            height: 50px;
            font-size: 30px;
            line-height: 30px;
            padding-top: 5px;
            padding-left: 60px;
            transform: rotate(5deg);
        }

        div:nth-child(3) {
            width: 140px;
            height: 44px;
            margin: auto;
            text-align: center;
            line-height: 44px;
            font-size: 18px;
            border-radius: 22px;
            color: #fff;
            background-color: #FF8200;
            cursor: pointer;
        }

        div:nth-child(4) {
            padding: 16px 8px;

            span:nth-child(1) {
                color: #939393;
                font-size: 16px;
            }

            span:nth-child(2) {
                font-size: 18px;
                cursor: pointer;
            }
        }

    }
}

nav {
    .content {
        position: sticky;
        top: 0;

        div {

            width: 100%;
            height: 50px;
            margin: 5px auto;
            border-radius: 25px;
            display: flex;
            cursor: pointer;
            span:nth-child(1) {
                font: 400 25px/50px 'icomoon';
                flex: 4;
                text-align: center;
            }

            span:nth-child(2) {
                font: 400 25px/50px 'AlimamaFangYuanTi';
                flex: 7;

            }
        }
    }

    position: absolute;
    width: 195px;
    height: 220px;
    top: 420px;
    left: 0;
    color: #333333;
    background-color: #fff;
    height: 100%;



}

main {
    margin: 10px auto;
    width: 720px;
    position: relative;
    .nav {
        width: 100%;
        height: 50px;
        list-style: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #333333;
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 1;

        li {
            width: 60px;
            height: 35px;
            border-radius: 17.5px;
            text-align: center;
            font: 400 20px/35px 'AlimamaFangYuanTi';
            cursor: pointer;
        }
    }

    article {
        margin-top: 5px;

        .item {
            margin: 8px 0;
            background-color: #fff;

            .head {
                height: 50px;
                display: flex;

                .portrait {
                    flex: 2;

                    .icon {
                        cursor: pointer;
                        width: 50px;
                        height: 50px;
                        margin: 0 auto;
                        border-radius: 25px;
                        border: 1px solid #FEF2E6;
                    }
                }

                .detail {

                    flex: 14;
                    display: flex;
                    flex-direction: column;

                    .username {
                        cursor: pointer;
                        color: #333333;
                        flex: 2;
                        font: 700 20px/30px 'AlimamaFangYuanTi';
                    }

                    .time {
                        color: #939393;
                        flex: 1;
                        font: 400 15px/20px 'AlimamaFangYuanTi';
                    }

                }

                .concern {
                    cursor: pointer;
                    flex: 2;
                    margin: 10px;
                    border-radius: 10px;
                    text-align: center;
                    font: 400 20px/30px 'AlimamaFangYuanTi';
                    color: #FF9425;
                    border: 1px solid #FF9425;
                    span:nth-child(1) {
                        font: 400 20px/30px 'icomoon';
                        
                    }  
                }
            }

            .main {
                margin-top: 5px;
                padding-left: 70px;

                .article {
                    span {
                        color: #EB7340;
                       
                    }

                    color: #333333;
                    font: 400 20px/25px 'AlimamaFangYuanTi';
                    max-height: 100px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    overflow: hidden;
                    transition: max-height .2s ease-in-out;                   
                    cursor: pointer;
                    .close{
                        width: 40px;
                        height: 25px;
                        color:#EB7340;
                        display: none;
                    }
            


                }

                .media {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .picture {
                        width: 210px;
                        height: 210px;
                        cursor: zoom-in;
                        transition: all .1s ease-in-out;
                        position: relative;
                        .close{
                            width: 40px;
                            height: 40px;
                            border-radius: 20px;
                            position: absolute;
                            bottom: 20px;
                            left: 50%;
                            transform-origin: center;
                            transform: translateX(-50%) rotate(45deg);
                            display: none;
                            font:400 40px/40px 'icomoon';
                            background-color:rgba(0, 0, 0, .3);
                            color: #fff;
                            cursor: pointer;
                        }

                    }
                }
            }

            .operation {
                padding-top: 5px;
                padding-left: 70px;
                height: 35px;
                display: flex;
                justify-content: space-around;

                div {
                    cursor: pointer;
                    width: 100px;
                    text-align: center;
                    color: #B7B7B7;
                    font: 400 18px/35px 'AlimamaFangYuanTi';

                    span:nth-child(1) {
                        font: 400 15px/35px 'icomoon';
                        padding-right: 10px;
                    }
                }
            }

        }
    }
}

.topic {
    position: absolute;
    width: 195px;
    top: 420px;
    height: 100%;
    right: 0;
    .content {
        background-color: #fff;
        position: sticky;
        top: 0;
        overflow: hidden;
        z-index: 999;
    }

    .title {
        height: 50px;
        font: 500 30px/50px 'alimamafangyuanti';
        background-color: #fff;
        color: #FF8200;
        text-align: center;

        span {
            cursor: pointer;
        }

        span:nth-child(2) {
            padding-left: 8px;
            font: 400 25px/50px 'icomoon';
            color: #969696;

        }


    }

    ul {
        list-style: none;

        li {
            padding-left: 8px;
            height: 40px;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            span:nth-child(1) {
                color: #FF8200;
            }

            span:nth-child(2) {
                font: 300 20px/40px 'alimamafangyuanti';
                cursor: pointer;
                color: #333333;
            }
        }
    }

    .more {
        margin: 8px;
        height: 40px;
        background-color: #F9F9F9;
        text-align: center;
        font: 400 17px/40px 'alimamafangyuanti';
        cursor: pointer;
        color: #838383;

        span:nth-child(2) {
            font: 300 15px/32px 'icomoon';
        }

    }
}

footer {
    position: absolute;
    // top: 935px;
    top: 420px;
    right: 0;
    width: 195px;
    padding-left: 5px;
    height: 100%;

    .content {

        height: 100vh;
        position: sticky;
        top: 0;

        ul {
            position: absolute;
            bottom: 0;

        }


    }

    ul {
        list-style: none;

        li {
            height: 60px;

            .title {
                span {
                    font: 500 15px/40px 'icomoon';
                }

                height: 40px;
                padding-left: 5px;
                font: 500 15px/40px 'alimamafangyuanti';
                color: #606060;

            }

            .main {
                font: 300 12px/20px 'alimamafangyuanti';
                color: #939393;
                padding-left: 15px;

                span {
                    padding: 0px 5px;
                    cursor: pointer;
                }
            }
        }
    }

}

.return-top {
    position: fixed;
    width: 30px;
    height: 30px;
    top: 80vh;
    left: 50%;
    transform: translateX(560px);
    display: none;
    opacity: 0;
    transition: all .2s ease;
    cursor: pointer;
    font: 400 30px/30px 'icomoon';
    color: #939393;
}
.articleOperation-click{
    color: #FF8C16!important
}